<template>
    <div class="container">
        <!-- 头部 -->
        <global-header :user="user"></global-header>
        <!-- 文章预览 -->
        <global-content :list="list"></global-content>
        {{a}}
    </div>
    <router-view/>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import 'bootstrap/dist/css/bootstrap.min.css'
// 头部组件
import GlobalHeader,{UserProps} from '../components/GlobalHeader.vue'
// 文章预览
import GlobalContent,{Content} from '../components/GlobalContent.vue'
import { useStore } from 'vuex'
import store from '../store/index'
// GlobalHeader头部组件返回的数据泛型
const currentUser:UserProps = {
    isLogin:true,
    name:'zhu',
    id:'1'
}

const contentlist:Content[] = store.state.contentlist
// const contentlist:Content[] = [
//     {
//         id:1,
//         title:'Vue',
//         avatar: 'https://i02piccdn.sogoucdn.com/cac1fe8d3eddabbc',
//         description:'Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动'
//     },
//     {
//         id:2,
//         title:'Vue.js',
//         avatar:'https://i02piccdn.sogoucdn.com/cac1fe8d3eddabbc',
//         description:'Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动'
//     },
//     {
//         id:3,
//         title:'Vue.js',
//         avatar:'https://i02piccdn.sogoucdn.com/cac1fe8d3eddabbc',
//         description:'Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动'
//     },
//     {
//         id:4,
//         title:'Vue.js',
//         // avatar:'https://i02piccdn.sogoucdn.com/cac1fe8d3eddabbc',
//         description:'Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动'
//     },
//     {
//         id:5,
//         title:'Vue.js',
//         avatar:'https://i02piccdn.sogoucdn.com/cac1fe8d3eddabbc',
//         description:'Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动'
//     },
//     {
//         id:6,
//         title:'Vue.js',
//         avatar:'https://i02piccdn.sogoucdn.com/cac1fe8d3eddabbc',
//         description:'Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动'
//     }
// ]





export default defineComponent({
    components:{
        GlobalHeader,
        GlobalContent
    },
    setup () {
        const store = useStore()
        const a = store.state.name
        return {
            user:currentUser,
            list:contentlist,
            a
        }
    }
})
</script>

<style scoped>

</style>
